﻿<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>Table</title>
	<link rel="stylesheet" href="/static/plugins/layui/css/layui.css" media="all"/>
	<link rel="stylesheet" href="/static/css/global.css" media="all">
	<link rel="stylesheet" href="/static/plugins/font-awesome/css/font-awesome.min.css">
	<link rel="stylesheet" href="/static/css/table.css"/>
</head>

<body>
<div class="admin-main">
	<form action="" class="layui-form" method="post">
		<div class="layui-inline">
			<select name="env" asnycSelect="/admin/profile/options" lay-filter="env_select" lay-verify="required">
				<option value="">请选择环境</option>
			</select>
		</div>

		<div class="layui-inline">
			<input type="button" class="layui-btn J_search" lay-submit lay-filter="search" value="查询"/>
		</div>
	</form>

	<fieldset class="layui-elem-field">
		<legend>应用节点列表</legend>
		<div class="layui-field-box layui-form">
			<table class="layui-table admin-table">
				<thead>
				<tr>
					<th width="160">应用</th>
					<th width="50">环境</th>
					<th width="*">节点ID</th>
					<th width="100">ip地址</th>
					<th width="50">端口</th>
					<th width="70">springboot</th>
					<th width="150">心跳时间</th>
					<th width="80">操作</th>
				</tr>
				</thead>
				<tbody id="content"></tbody>
			</table>
		</div>
	</fieldset>
</div>

<!--模板-->
<script type="text/html" id="list_tpl">
	{{# layui.each(d.data, function(index, item){ }}
	<tr>
		<td>{{ item.appName }}</td>
		<td>{{ item.env }}</td>
		<td>{{ item.nodeId }}</td>
		<td>{{ item.serverip }}</td>
		<td>{{ item.serverport }}</td>
		<td>{{ item.springboot ? '是' : '否' }}</td>
		<td>{{ item.syncTime }}</td>
		<td data-appName="{{ item.appName }}" data-env="{{ item.env }}" data-nodeId="{{ item.nodeId }}">
			<button class="layui-btn layui-btn-danger layui-btn-mini J_view_config">查看配置</button>
		</td>
	</tr>
	{{# }); }}
</script>

<script type="text/javascript" src="/static/plugins/layui/layui.js"></script>
<script type="text/javascript" src="/static/js/common.js?v20180106?a=91"></script>
<script type="text/javascript">
	layui.use(['layer', 'laytpl', 'form'], function () {
		var $ = layui.jquery, laytpl = layui.laytpl, form = layui.form();
		$("#content").on('click', ".J_view_config", function () {
			var $pa = $(this).parent(), appName = $pa.attr('data-appName'),
				env = $pa.attr('data-env'), nodeId = $pa.attr('data-nodeId');
			var url = "/monitor/app/config/" + env + "/" + appName + "?nodeId=" + nodeId;
			$.getJSON(url, function (data) {
				if (data.code == 200) {
					parent.layer.open({
						type: 1
						, title: false
						, closeBtn: false
						, area: ['900px', '500px']
						, shade: 0.8
						, id: 'layer_view_content'
						, btn: ['关闭']
						, moveType: 1
						, content: data.data
						, success: function (layero) {
							var btn = layero.find('.layui-layer-btn');
							btn.css('text-align', 'center');
						}
					});
				} else {
					layer.msg(data.msg, {icon: 5});
				}
			});
		});

		form.on('submit(search)', function (data) {
			var loading = layer.load();
			$.getJSON('/monitor/app/' + data.field.env, function (data) {
				layer.close(loading);
				if (data.code == 200) {
					var tpl = $('#list_tpl').html();
					laytpl(tpl).render(data, function (html) {
						$("#content").html(html);
					});
				} else {
					layer.msg(data.msg, {
						icon: 5
					});
				}
			});
			return false;
		});
	});
</script>
</body>

</html>